import { Component,OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HeroService } from './hero.service';
import { Hero } from './hero';

@Component({
  selector: 'my-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css'],
  providers:[]
})
export class HeroesComponent implements OnInit{
  title = 'app';
  selectedHero: Hero;
  heroes: Hero[];
  constructor(
    private router: Router,
    private heroService: HeroService){};
    
  onSelect(hero:Hero): void{
    this.selectedHero = hero;
  }
  getHeroes():void{
    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }
  ngOnInit():void{
    this.getHeroes();
  }
  gotoDetail():void{
    this.router.navigate(['/detail',this.selectedHero.id])
  }
}
